<template>
	<view class="history-container">
		<view class="top-btns">
			<u-button :type="selectedItems.length > 0 ? 'warning' : 'info'" :text="'删除已选记录'" @click="deleteSelected"
				class="delete-btn" color="#fde4cb" shape="circle"></u-button>
			<u-button text="删除全部记录" color="#f37b1d" @click="deleteAll" class="delete-all-btn" shape="circle"></u-button>
		</view>
		<!-- 列表渲染 -->
		<view class="history-list">
			<view v-for="(item, index) in historyList" :key="index" class="history-item">
				<view class="item-left">
					<u-checkbox v-model="item.checked" @change="checkboxChange(item)"
						active-color="#f37b1d"></u-checkbox>
				</view>
				<view class="item-content" @click="itemClick(item)">
					<view class="title">{{item.title}}</view>
					<view class="time">{{item.updatetime}}</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import {
		history_list,
		del_history
	} from '@/api/user.js'
	import {
		formatDate
	} from '@/api/icon.js'
	export default {
		data() {
			return {
				historyList: [],
				selectedItems: []
			}
		},
		onShow() {
			this.getHistoryList()
		},
		methods: {
			// 获取历史记录列表
			async getHistoryList() {
				try {
					// 这里替换为实际的API接口调用
					const res = await history_list({
						page: 1,
						rows: 9999
					})
					if (res.code === 1) {
						this.historyList = res.data.data.map(item => ({
							...item,
							checked: false,
							updatetime: formatDate(item.updatetime)
						}))
					} else {
						this.$u.toast(res.message || '获取历史记录失败')
					}
				} catch (e) {
					this.$u.toast('网络请求失败')
				}
			},

			// 复选框变化
			checkboxChange(item) {
				item.checked = !item.checked
				if (item.checked) {
					this.selectedItems.push(item.id)
				} else {
					const index = this.selectedItems.indexOf(item.id)
					if (index > -1) {
						this.selectedItems.splice(index, 1)
					}
				}
				console.log(this.selectedItems, 'this.selectedItems')
			},

			// 点击项目
			itemClick(item) {
				// 可以根据需要跳转到详情页或其他操作
				uni.navigateTo({
					url: `/pages/detail/detail?id=${item.id}`
				})
			},

			// 删除选中记录
			async deleteSelected() {
				if (this.selectedItems.length === 0) {
					this.$u.toast('请先选择要删除的记录')
					return
				}

				try {
					const res = await del_history({
						ids: this.selectedItems.join(',')
					})

					if (res.code === 1) {
						this.$u.toast('删除成功')
						this.historyList=[]
						this.getHistoryList()
						this.selectedItems = []
					} else {
						this.$u.toast(res.message || '删除失败')
					}
				} catch (e) {
					this.$u.toast('网络请求失败')
				}
			},

			// 删除全部记录
			async deleteAll() {
				uni.showModal({
					title: '提示',
					content: '确定要删除全部记录吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								const res = await del_history({
									all: 1
								})
								if (res.code === 1) {
									this.$u.toast('删除成功')
									this.historyList = []
									this.selectedItems = []
								} else {
									this.$u.toast(res.message || '删除失败')
								}
							} catch (e) {
								this.$u.toast('网络请求失败')
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.history-container {
		min-height: 100vh;
		background-color: #fff;
		padding: 20rpx;

		.history-list {
			.history-item {
				display: flex;
				align-items: baseline;
				padding: 20rpx;
				margin-bottom: 20rpx;
				// border-radius: 12rpx;
				border-bottom: 1px solid #EBEDF0;

				.item-left {
					margin-right: 20rpx;
				}

				.item-content {
					flex: 1;

					.title {
						font-size: 32rpx;
						color: #333;
						font-weight: 500;
						margin-bottom: 10rpx;
					}

					.time {
						font-size: 26rpx;
						color: #999;
						text-align: right;
					}
				}
			}
		}

		.top-btns {
			position: relative;
			display: flex;
			justify-content: space-around;
			padding: 0 30rpx;

			.delete-btn,
			.delete-all-btn {
				width: 300rpx;
			}

			.delete-btn {
				color: #f37b1d !important;
			}
		}
	}
</style>